import React, {useState} from 'react';
import { useHistory } from 'react-router-dom'
import 'antd/dist/antd.css'
import './app.scss'
import { Button, Input, Form } from 'antd'
import axios from 'axios'

const FormItem = Form.Item

export default function Login() {

  const [name, setName] = useState('')
  const [pwd, setPwd] = useState('')

  const history = useHistory()

  return <div className="login-form">
    <Form>
      <FormItem
        label="用户名"
        name="username"
        rules={[{ required: true, message: 'Please input username' }]}>
        <Input placeholder="请输入用户名" onChange={(event)=>{
          setName(event.target.value)
        }}/>
      </FormItem>
      <FormItem
        label="密码"
        name="password"
        rules={[{ required: true, message: 'Please input password' }]}>
        <Input.Password placeholder="请输入密码" onChange={(event)=>{
          setPwd(event.target.value)
        }}/>
      </FormItem>
      <label>{name} - {pwd}</label>
      <FormItem>
        <Button type="primary" onClick={()=> {
          login(name, pwd).then((res)=>{
            let code = res.data.code
            if (code === 0) {
              console.log('跳转')
              history.push('/home')
            }
          })
        }}>登录</Button>
      </FormItem>
    </Form>

  </div>
}

function login(name, pwd) {
  return axios.get("/login.json", {
    params: {
      name, pwd
    }
  })
}